<template>
  <div>
    <div>v-model用法</div>
    <hr>
    <input type="text" v-model='uname'>
    <!-- 上面的v-model是v-bind:value和@input的语法糖 -->
    <input type="text" :value='uname' @input='uname=$event.target.value'>

    <!-- Vue2中如下的两种写法等效 -->
    <!--
      // v-model如果绑定到组件上，表示父子组件之间的双向数据传递
      <MyChild v-model='info' />
      <MyChild :value='info' @input='info=$event' />

      // 子组件向父组件传值
      this.$emit('input', 'hi')
    -->

    <!-- <MyChild v-model='info' /> -->
    <!-- <MyChild :modelValue='info' @update:modelValue='info=$event' /> -->
    <!-- 此处 $event表示子组件传递回来的值 -->

    <MyChild v-model:modelValue="info" v-model:abc='info' v-model:msg='info' />

    <!-- Vue3中sync修饰符已经被废弃 -->
    <!-- this.$emit('update:abc', 'hi') -->
    <!-- this.$emit('update:msg', 'hi') -->
  </div>
</template>
<script>
import { ref } from 'vue'
import MyChild from './views/MyChild.vue'

export default {
  name: 'App',
  components: { MyChild },
  setup () {
    const uname = ref('tom')
    const info = ref('hello')
    return { uname, info }
  }
}
</script>
